<template>
    <v-container class="justify-start full-height">
        <p class="title white--text">Failure declaration / 故障申报
            <v-btn text color="accent" dark class="float-right">保存</v-btn>
        </p>
        <v-card class="mt-3" elevation="0" >
            <v-card-title>
                <v-form
                        ref="form"
                        v-model="valid"
                        lazy-validation
                >
                    <v-row>
                        <v-col
                                cols="6"
                        >
                            <v-select
                                    v-model="params.malfunction"
                                    :items="items"
                                    :rules="[v => !!v || 'Item is required']"
                                    label="出现问题"
                                    required
                            ></v-select>
                        </v-col>
                        <v-col
                                cols="6"
                        >
                            <v-select
                                    v-model="params.errorKey"
                                    :items="errorList"
                                    item-value="error_code_id"
                                    item-text="error_code"
                                    label="错误代码"
                                    clearable
                            ></v-select>
                        </v-col>
                    </v-row>
                    <v-textarea v-model="params.describe" label="请填写10字以上的问题描述以使我们提供更好的帮助..."
                                :rules="[v => !!v || 'Item is required',v => v.length >= 10 || 'Min 10 characters']"></v-textarea>
                </v-form>
            </v-card-title>
        </v-card>
    </v-container>
</template>

<script>
    import {addMalfunctionInfo, getErrorCodeList} from "../../api/user";

    export default {
        name: "declare",
        data() {
            return {
                valid: false,
                params: {
                    //出现问题
                    malfunction: '',
                    //描述
                    describe: '',
                    //错误代码
                    errorKey: ''
                },
                items: ['出不了纸', '出得了纸'],
                errorList: []
            }
        },
        mounted() {
            this.initialize()
        },
        methods: {
            initialize() {
                getErrorCodeList().then(res => {
                    this.errorList = res.result.showing
                })
            },
            validate() {
                if (this.$refs.form.validate()) {
                    const {malfunction, errorKey, describe} = this.params;
                    addMalfunctionInfo({
                        malfunction: malfunction,
                        describe: describe,
                        error_code_id: errorKey
                    }).then(res => {
                        this.$refs.form.reset()
                    })
                } else {

                }
            }
        }
    }
</script>

<style scoped>

</style>
